import React, { useEffect, useState } from 'react';
import { getAdminList,addAdmin, updateAdmin, delAdmin } from '../../api/user';
import {Table, Tag, Button, Drawer, Input, Select, Tree, Modal, message, Popconfirm  } from 'antd'
import menus from '../../router'
import { useTreeData } from '../../utils/hooks';

const Admin = () => {

    // 通过 hooks 使用轻提示
    const [messageApi, contextHolder] = message.useMessage()


  const list = useTreeData(menus)

  const [adminList, setAdminList] = useState()

  useEffect(()=>{
    getAdminList().then(res => {
      // console.log(res);
      setAdminList(res.data)
    })
  }, [])


  // ------------ 添加管理员
  // 打开抽屉的 open
  const [open, setOpen] = useState(false)
  // 关闭抽屉的方法
  const onClose = ()=>{
    setOpen(false)
  }
  // 定义管理员账号密码角色和权限的变量
  const [adminname,setAdminName] = useState()
  const [password,setPassword] = useState()
  const [role,setRole] = useState()
  const [checkedKeys,setCheckedKeys] = useState()
  // ------------ 添加管理员



  // ------------------ 编辑管理员

  const [isModalOpen,setIsModalOpen] = useState(false)
  const handleOk = () => {
    // 点击确定的回调函数
    // console.log(adminname,password,role,checkedKeys);
    updateAdmin({
      adminname,password,role,checkedKeys
    }).then(res => {
      // console.log(res);
      if(res.code == 200){
        messageApi.success('修改成功')
        // 发送请求将修改后的内容提交到服务器
      // 清空表单内容
      // 重新获取最新数据
      setAdminName('')
      setPassword('')
      setRole(1)
      setCheckedKeys([])
      setIsModalOpen(false);


      getAdminList().then(res => {
        setAdminList(res.data)
      })
      }else {
        messageApi.error(res.message)
      }
    })

  };

  const handleCancel = () => {
    // 点击关闭的回调函数
    setIsModalOpen(false);
  };
  // ------------------ 编辑管理员



  return (
    <div>
      {contextHolder}
      <Button onClick={()=>{setOpen(true)}}> 添加管理员 </Button>
      <Table dataSource={adminList} rowKey={'adminid'} scroll={{y: 430}}>
        <Table.Column title='序号' render={(t,r,i)=>{
          return (<span>{i + 1}</span>)
        }}></Table.Column>

        <Table.Column title='管理员名称' dataIndex={'adminname'}></Table.Column>
        <Table.Column title='管理员权限' dataIndex={'role'} render={(t)=>{
          return t == 1 ? (<Tag color="green">管理员</Tag>) : (<Tag color="orange">超级管理员</Tag>)
        }}></Table.Column>
        <Table.Column title='操作' render={(t,r,i)=>{
          return (<>
            <Button onClick={()=>{
              setIsModalOpen(true)
              // console.log(r);
              setAdminName(r.adminname)
              setPassword(r.password)
              setRole(r.role)
              setCheckedKeys(r.checkedKeys)
            }}>编辑</Button>
            <Popconfirm
              title="你确定要删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={()=>{
                // 点击确定的时候要发送数据请求进行数据的删除
                delAdmin({
                  adminid: r.adminid
                }).then(res => {
                  if(res.code == 200){
                    messageApi.success('删除成功')
                    getAdminList().then(res => {
                      setAdminList(res.data)
                    })
                  }else {
                    messageApi.error(res.message)
                  }
                })
              }}
            >
              <Button>删除</Button>
            </Popconfirm>

          </>)
        }}></Table.Column>

      </Table>

        {/* 添加管理员的抽屉 */}
      <Drawer title="添加管理员" placement="right" onClose={onClose} open={open}>
        <Input value={adminname} onChange={e => {setAdminName(e.target.value)}}  placeholder='请输入管理员账号'/>
        <Input  style={{margin: '16px 0'}} value={password} onChange={e => {setPassword(e.target.value)}}  placeholder='请输入管理员密码'/>
        <Select value={role} onChange={e => {setRole(e)}} style={{width: '100%'}} placeholder='请选择管理员类型' >
          <Select.Option value={1}>管理员</Select.Option>
          <Select.Option value={2}>超级管理员</Select.Option>
        </Select>
        <Tree
          checkable
          defaultExpandAll
          treeData={list}
          onCheck={(checkedKeys)=>{
            // console.log(checkedKeys);
            // 获取选中的权限
            setCheckedKeys(checkedKeys)
          }}
        />

        <Button onClick={()=>{
          // console.log(adminname,password,role, checkedKeys);
          addAdmin({
            adminname,password,role, checkedKeys
          }).then(res => {
            if(res.code == 200){
              messageApi.success('添加成功')
              setAdminName('')
              setPassword('')
              setRole(1)
              setCheckedKeys([])
              setOpen(false)
              getAdminList().then(res => {
                setAdminList(res.data)
              })
            }else {
              messageApi.error(res.message)
            }

          })

        }}>添加</Button>
      </Drawer>


      {/* 编辑管理员的对话框 */}
      <Modal
      title="编辑管理员"
      open={isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}
      cancelText='取消'
      okText='提交'
      >

      <Input value={adminname} onChange={e => {setAdminName(e.target.value)}}  placeholder='请输入管理员账号'/>
        <Input disabled={true} style={{margin: '16px 0'}} value={password} onChange={e => {setPassword(e.target.value)}}  placeholder='请输入管理员密码'/>
        <Select value={role} onChange={e => {setRole(e)}} style={{width: '100%'}} placeholder='请选择管理员类型' >
          <Select.Option value={1}>管理员</Select.Option>
          <Select.Option value={2}>超级管理员</Select.Option>
        </Select>
        <Tree
          checkable
          defaultExpandAll
          treeData={list}
          checkedKeys={checkedKeys}
          onCheck={(checkedKeys)=>{
            // console.log(checkedKeys);
            // 获取选中的权限
            setCheckedKeys(checkedKeys)
          }}
        />

      </Modal>

    </div>
  );
};

export default Admin;
